<template>
  <div class="box">
    <van-form @submit="onRegister">
      <van-cell-group inset>
        <van-field v-model="user.username" name="用户名" label="用户名" placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]" />
        <van-field v-model="user.password" type="password" name="密码" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
        <van-field v-model="user.nickname" name="昵称" label="昵称" placeholder="昵称"
          :rules="[{ required: true, message: '请填写昵称' }]" />
        <van-field v-model="user.age" name="年龄" label="年龄" placeholder="年龄"
          :rules="[{ required: true, message: '请填写年龄' }]" />
        <van-field v-model="user.sex" name="性别" label="性别" placeholder="性别"
          :rules="[{ required: true, message: '请填写性别' }]" />
        <van-field v-model="user.fullname" name="真实姓名" label="真实姓名" placeholder="真实姓名"
          :rules="[{ required: true, message: '请填写真实姓名' }]" />

        <van-field name="uploader" label="文件上传">
          <template #input>
            <!-- <van-uploader v-model="user.headerimg" /> -->
            <van-uploader upload-text="请上传头像" v-model="user.headerImg" :max-count="1" :after-read="afterRead" />
          </template>
        </van-field>
      </van-cell-group>
      <div style="margin: 16px" class="register_btn">
        <van-button round block type="primary" native-type="submit">
          注册
        </van-button>
      </div>
      <van-button plain type="primary" class="backStart" @click="backStart">返回</van-button>
    </van-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { RequestReq } from "../hooks/index";
const { user, onRegister, backStart } = RequestReq();
const file = ref()
const afterRead = () => {
  console.log('上传成功');

}
</script>
<style lang="less" scoped>
.box {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(../../public/images/login.png) no-repeat;
  background-size: cover;

  //   background-color: aquamarine;
  .van-form {
    width: 450px;
    // background: rgba(213, 191, 191, 0.3);
    text-align: center;
    border-radius: 8px;
    padding: 30px 25px;
    margin-top: 45%;

    .register_btn {
      display: flex;
    }

    .backStart {
      width: 70px;
      height: 30px;
      border: none;
      //   background: rgba(225, 212, 212, 0.5);
      //   margin-top: 8%;
      margin-left: -90%;
    }
  }
}
</style>
